<template>
  <div class="form-preview-task-customer">
    <div class="form-preview-group">
      <!-- displayName=客户的时候做了翻译 -->
      <!-- TODO 需要调整 -->
      <label>{{_displayName || $t('common.base.customer')}} <span class="form-preview-notNull" v-if="field.isNull == 0">*</span></label>
      <div class="form-preview-mock">
        <p class="form-preview-control">
          {{ _placeHolder2 || field.placeHolder }}
        </p>
      </div>
    </div>
    <div class="form-preview-group" v-if="address">
      <label>{{addressLabel}}<span class="form-preview-notNull" v-if="field.setting.customerOption && field.setting.customerOption.addressNotNull">*</span></label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div class="form-preview-group" v-if="linkman">
      <label>{{linkManLabel}}<span class="form-preview-notNull" v-if="field.setting.customerOption && field.setting.customerOption.linkmanNotNull">*</span></label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div class="form-preview-group" v-if="product">
      <label>{{productLabel}} <span class="form-preview-notNull" v-if="productNotNull">*</span></label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
  </div>
</template>

<script>
import { previewProps } from '@src/component/form/components/props';
import translate from '@src/component/form/mixin/translate.js'
import { transformI18n } from '@src/locales'

export default {
  name: 'form-customer-preview',
  props: previewProps,
  mixins: [translate],
  computed: {
    customerOption() {
      return this.field.setting.customerOption || {} 
    },
    address() {
      return this.customerOption.address 
    },
    linkman() {
      return this.customerOption.linkman 
    },
    product() {
      return this.customerOption.product 
    },
    productNotNull() {
      return this.customerOption.productNotNull 
    },
    addressLabel(){
      return this.mode == "product" ? transformI18n('common.form.preview.customer.customerAddressLabel', this.formPreviewLocale) : transformI18n('common.form.preview.customer.addressLabel', this.formPreviewLocale)
    },
    linkManLabel(){
      return transformI18n('common.form.preview.customer.linkmanLabel', this.formPreviewLocale)
    },
    productLabel(){
      return transformI18n('common.form.preview.customer.productLabel', this.formPreviewLocale)
    }


  }
}
</script>
<style lang="scss" scoped>
  .form-preview-task-customer{
    display: flex;
    flex-direction: column;
    .form-preview-group{
      border-bottom: 1px solid  #F5F5F5;
    }
  }
</style>

